<template>
	<div class="all">
		<div class="head">
			<div class="item1" @click="back">&lt;</div>
			<div class="item2">逗圈主页</div>
			<div class="item3">写话题</div>
			<div class="item4">···</div>
		</div>
		<div class="content">
			<div class="con_font">
				<h3>好莱坞老电影</h3>
				<span>创建热：薄荷</span>
				<span>创建时间：2010-07-22</span>
				<p>收到没金凤凰你快上，了几点开始里显示的节奏恐龙当家</p>
			</div>
			<div class="con_pic">
				<img src="../../assets/images/20.gif" alt="">
				<span>未加入</span>
			</div>
			<div class="clear"></div>
		</div>
		<!-- top_start -->
				<div class="move_hot">
		    			<span>话题推荐</span><i>更多&gt;</i>
						<div class="clear"></div>
				</div>
			<!-- top_end -->
			<!-- interest_start -->
			<div class="interest">
				<h3>希特勒自传《我的奋斗》今日本教材，日本网友：政府传疯了</h3>
				<div class="pic_font">
					<span>参与评论：2343</span><span>参与转发：2341</span>
				    <div class="clear"></div>
				</div>	
			</div>
			<!-- interest_end -->
			<div class="kong"></div>
			<!-- interest_start -->
			<div class="interest">
				<h3>希特勒自传《我的奋斗》今日本教材，日本网友：政府传疯了</h3>
				<div class="pic_font">
					<img src="../../assets/images/21.gif" alt="">
					<span>参与评论：2343</span><span>参与转发：2341</span>
				    <div class="clear"></div>
				</div>	
			</div>
			<!-- interest_end -->
			<div class="interest">
				<h3>希特勒自传《我的奋斗》今日本教材，日本网友：政府传疯了</h3>
				<div class="pic_font">
					<img src="../../assets/images/22.gif" alt="">
					<span>参与评论：2343</span><span>参与转发：2341</span>
				    <div class="clear"></div>
				</div>	
			</div>
			<!-- interest_end -->
	</div>
</template>
<script>
	export default{
		name:'circle',
		data(){
			return{

			}
		},
		methods:{
            back(){
                this.$router.go(-1);
            }
        }
	}
</script>
<style scoped lang="less">
	.all{
		background: #f0f0f0;
	}
	.head{
		display: flex;
		flex-direction: row; 
		width: 100%;
		background: #fff;

	}
	.head .item1{
		flex-grow:3;
		padding: 15/35rem 0 15/35rem 10/35rem;
		font-size: 20/35rem;
		font-weight: bolder;

	}
	.head .item2{
		flex-grow:2;
		padding: 15/35rem 40/35rem;
		font-size: 20/35rem;
		font-weight: bolder;
	}
	.head .item3{
		flex-grow:1;
		padding-top: 2/35rem;
		margin: 15/35rem 0;
		font-size: 16/35rem;
		text-align:center;
		border: 1px solid #000;
		border-radius: 5px;

	}
	.head .item4{
		flex-grow:1;
		margin: 15/35rem 0 15/35rem 30/35rem;
		font-size: 20/35rem;
		font-weight: bolder;
	}
	.content{
		width: 100%;
		height: 140/35rem;
		background: url("../../assets/images/96.png");

	}
	.con_font{
		width: 72%;
		float: left;

	}
	.con_font h3{
		font-size: 22/35rem;
		font-weight: bolder;
		padding:10/35rem 0 20/35rem 10/35rem;

	}
	.con_font span{
	
		padding:0 0 10/35rem 10/35rem;

	}
	.con_font p{
		padding:10/35rem 30/35rem 10/35rem 0;
	}
	.con_pic{
		width: 25%;
		float: right;
	}
	.con_pic{
		padding:20/35rem 5/35rem 10/35rem 0;
	}
	.con_pic img{
		margin:0 0 15/35rem 0;
	}
	.con_pic span{
		margin:20/35rem 5/35rem 10/35rem 0;
		border: 1px solid #000;
		border-radius: 5px;
		padding-top: 2/35rem;
	}
	.clear{
		clear:both;
	}
	.move_hot{
	margin: 10/35rem;
	padding: 0 5/35rem;
	border-left:3px solid #5ebaff;
	color: #5ebaff;
	}
	.move_hot span{
	float:left;

	}
	.move_hot i{
	float:right;
	}
	.interest{
	padding: 15/35rem 20/35rem;
	background: #fff;
	}
	.pic_font{
	padding: 15/35rem 0 15/35rem 0;

	}
	.pic_font span{
	padding-top:10/35rem;
	padding-left:10/35rem;
   float: left;
   color: #bababa;

	}
	.pic_font img{
   width:100/35rem;
   height: 100/35rem;
   float: left;
	}	
	.interest h3{
	font-size: 20/35rem;
	font-weight: bolder;
	}



</style>